<template lang="html">
  <div class="top-back">
    <div class="top-back-left" v-if='topCloseText.flag' @click='BackPages'>
      <i class="iconfont icon-fanhui"></i>
      <span>返回</span>
    </div>
    <div class="top-back-left" @click='ClosePages' v-else>
      <i class="iconfont icon-chaicon"></i>
      <span>关闭</span>
    </div>
    <div class="top-back-right" @click='getShare'>
      <i class="iconfont icon-shareit"></i>
    </div>
    <div class="top-back-center">{{ topCloseText.title }}</div>
    <!-- share Start -->
    <div class="close-share-box"  v-if='IsShare' @click='ShareHide'>
      <div class="close-share">
        <share :config="config"></share>
      </div>
    </div>
    <div v-else></div>
    <!-- share End -->
  </div>
</template>

<script>
export default {
  name:'TopClose',
  data(){
    return{
      // 分享配置
      config :{
        url : 'http://localhost:8081/#/testresult', // 网址，默认使用 window.location.href
        source : '肺部测试结果', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title : '安心食疗小测试', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description : '安心食疗小测试', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
        image : require('@/assets/img/index/index04.gif'), // 图片, 默认取网页中第一个img标签
        disabled : ['google','facebook','twitter','dian','in','wechat'], // 禁用的站点
        // wechatQrcodeTitle   : '微信扫一扫：分享', // 微信二维码提示文字
        // wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
        // ---------------------
        // 作者：b2894lxlx
        // 来源：CSDN
        // 原文：https://blog.csdn.net/b2894lxlx/article/details/80089111
        // 版权声明：本文为博主原创文章，转载请附上博文链接！
      },
      IsShare:false
    }
  },
  props:{
    topCloseText:{
      type:Object,
      default:function(){
        return{}
      }
    }
  },
  methods:{
    // 返回上一页
    BackPages(event){
      window.history.back()
    },
    // 返回首页
    ClosePages(event){
      this.$router.push('/index')
    },
    // 点击分享
    getShare(){
      this.IsShare = true;
    },
    // 点击分享后隐藏分享div
    ShareHide(event){
      // console.log('ddddd');
      this.IsShare = false;
    }
  }
}
</script>

<style lang="less" scoped>
.top-back{
  width: 100%;
  height: 0.88rem;
  background-color: #44bf91;
  position: relative;
  line-height: 0.88rem;
  color: #fff;
  font-size: 0.36rem;
  .top-back-left{
    padding-left: 0.2rem;
    box-sizing: border-box;
    height: 0.48rem;
    text-align: center;
    position: absolute;
    left: 0;
    height: 100%;
  }
  .top-back-right{
    position: absolute;
    right: 0;
    margin-right: 0.2rem;
    height: 100%;
    i{
      font-size: 0.40rem;
    }
  }
  .top-back-center{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .close-share-box{
    position: fixed;
    top: 0.88rem;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    .close-share{
      width: 100%;
      height: 4rem;
      line-height: 4rem;
      position: fixed;
      top: 0.88rem;
      left: 0;
      z-index: 1;
      text-align: center;
      background-color:#fff;
      border-bottom: 1px solid #f1f1f1;
    }
  }
}
</style>
